<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东商品介绍</title>
    <style>
      * {
        box-sizing: border-box;
      }
      .info {
        display: flex;
        width: 600px;
        height: 40px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #e5383c;
      }

      .info .tag {
        flex: 1;
        text-align: center;
        line-height: 40px;
      }

      .info .tag:hover {
        cursor: pointer;
      }

      .current {
        color: #fff;
        background-color: #e5383c;
      }

      .intro {
        width: 600px;
        height: 400px;
        text-align: center;
        line-height: 400px;
        border: 1px solid #e5383c;
      }

      .intro:nth-child(n + 2) {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="info">
      <div class="tag current">商品介绍</div>
      <div class="tag">规格与包装</div>
      <div class="tag">售后保障</div>
      <div class="tag">商品评价</div>
    </div>

    <div class="desc">
      <div class="intro">商品介绍</div>
      <div class="intro">规格与包装</div>
      <div class="intro">售后保障</div>
      <div class="intro">商品评价</div>
    </div>

    <script>
      document.querySelector('.info').onclick = function () {
        const currentDiv = event.target
        document.querySelectorAll('.tag').forEach((div, idx) => {
          div.className = 'tag'
          //动态绑定自定义属性,这个属性是用来和下面对应显示的div联动的
          div.setAttribute('data-index', idx + 1)
        })
        currentDiv.className = 'tag current'

        document.querySelectorAll('.intro').forEach((div, idx) => {
          div.style.display = 'none'
          div.setAttribute('data-index', idx + 1)
        })
        document.querySelector('.desc div[data-index="' + currentDiv.getAttribute('data-index') + '"]').style.display = 'block'
      }
    </script>
  </body>
</html>
